<script>
	import selectUser from '@/components/selectUser/index.vue';
	import {
		addEleCouponOrders,
		getGoodsDetail,
		isLanderTicket
	} from "@/api/mall";
	import {
		GetUserCoupons
	} from '@/api/homePage.js';

	export default {
		name: "predetermined",
		components: {
			selectUser
		},
		data() {
			return {
				sgdesc: '身高<1.2米',
				// 航班和座位信息（通过onLoad参数赋值）
				ticketInfo: {
					id: '',
					classNo: '',
					departurePlace: '',
					arrivalPlace: '',
					departureTime: '',
					arrivalTime: '',
					departureDate: '',
					duration: '',
					shipName: '',
					seatType: '',
					cabinId: '',
					cabinCode: ''
				},

				// 座位类型中英文对照
				seatTypeMap: {
					'economy': '普通舱',
					'business': '商务舱',
					'first': '头等舱',
					'vip': 'VIP舱',
					'standard': '标准舱',
					'premium': '高级舱',
					// 添加其他可能的英文座位类型
				},

				// 乘客列表
				passengers: [],

				// 是否往返票 (0: 单程, 1: 往返)
				orderType: 0,

				// 返程票信息（如果是往返票）
				returnTicketInfo: null,

				// 备注
				remark: '',

				// 总价
				totalPrice: 0,

				// 用于动画
				lastTotalPrice: 0,

				// 联系人信息
				contactInfo: {
					name: '',
					phone: ''
				},

				// 是否已同意条款
				agreedToTerms: false,

				// 乘客选择
				currentSelectedGuests: [],

				// 提交防重复点击
				isSubmitting: false,

				showDetailPopup: false,

				// 优惠券相关数据
				hasCoupons: false,
				useCoupons: [],
				couponTotalDiscount: 0,
				alertTipsMessage: ''
			}
		},
		computed: {
			// 获取中文座位类型显示
			formattedSeatType() {
				return this.getSeatTypeInChinese(this.ticketInfo.seatType);
			},

			// 获取返程中文座位类型显示
			formattedReturnSeatType() {
				if (!this.returnTicketInfo) return '';
				return this.getSeatTypeInChinese(this.returnTicketInfo.seatType);
			},

			// 格式化后的出发日期显示
			formattedDepartureDate() {
				if (!this.ticketInfo.departureDate) return '';
				return this.formatDateDisplay(this.ticketInfo.departureDate);
			},

			// 格式化后的返程日期显示
			formattedReturnDate() {
				if (!this.returnTicketInfo || !this.returnTicketInfo.departureDate) return '';
				return this.formatDateDisplay(this.returnTicketInfo.departureDate);
			},

			// 船票数量 - 等于乘客数量
			ticketCount() {
				return Math.max(1, this.passengers.length);
			},

			// 实时计算总价
			calculatedTotalPrice() {
				// 直接使用从API获取的实际总价
				let price = parseFloat(this.totalPrice) || 0;

				// 减去优惠券折扣
				if (this.couponTotalDiscount > 0) {
					price -= this.couponTotalDiscount;
					// 确保价格不低于0
					price = Math.max(0, price);
				}

				return price.toFixed(2);
			},

			// 明细显示的总价（不包含优惠券折扣，显示原始价格）
			detailTotalPrice() {
				const goTotal = this.getGoTotalPrice();
				const backTotal = this.getBackTotalPrice();
				return (goTotal + backTotal).toFixed(2);
			},

			// 最终支付价格（包含优惠券折扣）
			finalPayPrice() {
				const totalPrice = this.getGoTotalPrice() + this.getBackTotalPrice();
				let finalPrice = totalPrice;

				// 减去优惠券折扣
				if (this.couponTotalDiscount > 0) {
					finalPrice -= parseFloat(this.couponTotalDiscount);
					// 确保价格不低于0
					finalPrice = Math.max(0, finalPrice);
				}

				return finalPrice.toFixed(2);
			},

			// 是否可以提交订单
			canSubmitOrder() {
				// 检查必要的票务信息
				if (!this.ticketInfo.id) return false;

				// 检查乘客信息
				if (this.passengers.length === 0) return false;

				// 检查联系人信息
				if (!this.contactInfo.name || !this.contactInfo.phone) return false;

				// 检查是否同意条款
				if (!this.agreedToTerms) return false;

				return true;
			}
		},
		watch: {
			'$i18n.locale'() {
				// 监听语言变化，重新设置导航栏标题
				this.setNavigationTitle();
			}
		},
		onShow() {
			// 添加优惠券选择监听
			uni.$on('couponSelected', this.onCouponSelected);
		},
		onHide() {
			// 移除监听
			uni.$off('couponSelected', this.onCouponSelected);
		},
		onUnload() {
			// 移除监听
			uni.$off('couponSelected', this.onCouponSelected);
		},
		onLoad(options) {
			// 解析路由参数
			if (options) {
				// 处理订单类型
				if (options.orderType) {
					this.orderType = Number(options.orderType);
				} else if (options.isRoundTrip) {
					// 兼容老版本参数
					this.orderType = options.isRoundTrip === '1' ? 1 : 0;
				}
				console.log(options);


				// 单程或去程航班信息
				this.ticketInfo = {
					id: options.departureId || options.id || '',
					classNo: options.classNo || '',
					departurePlace: options.from ? decodeURIComponent(options.from) : '',
					arrivalPlace: options.to ? decodeURIComponent(options.to) : '',
					startPortId: options.startPortId ? decodeURIComponent(options.startPortId) : '',
					arrivePortId: options.arrivePortId ? decodeURIComponent(options.arrivePortId) : '',
					departureTime: options.departureTime ? decodeURIComponent(options.departureTime) : '',
					arrivalTime: options.arrivalTime ? decodeURIComponent(options.arrivalTime) : '',
					departureDate: options.departureDate || options.date || '',
					duration: options.duration ? decodeURIComponent(options.duration) : '',
					shipName: options.shipName ? decodeURIComponent(options.shipName) : '',
					seatType: options.seatType || '',
					cabinId: options.cabinId || '',
					cabinCode: options.cabinCode || ''
				};

				// 返程票信息
				if (this.orderType === 1 && options.returnId) {
					this.returnTicketInfo = {
						id: options.returnId,
						classNo: options.returnClassNo || '',
						departurePlace: options.to ? decodeURIComponent(options.to) : '',
						arrivalPlace: options.from ? decodeURIComponent(options.from) : '',
						startPortId: options.arrivePortId ? decodeURIComponent(options.arrivePortId) :
						'', // 返程起始港口是去程的到达港口
						arrivePortId: options.startPortId ? decodeURIComponent(options.startPortId) :
						'', // 返程到达港口是去程的起始港口
						departureTime: options.returnDepartureTime ? decodeURIComponent(options.returnDepartureTime) :
							'',
						arrivalTime: options.returnArrivalTime ? decodeURIComponent(options.returnArrivalTime) : '',
						departureDate: options.returnDate || '',
						duration: options.returnDuration ? decodeURIComponent(options.returnDuration) : '',
						shipName: options.returnShipName ? decodeURIComponent(options.returnShipName) : '',
						seatType: options.returnSeatType || '',
						cabinId: options.returnCabinId || '',
						cabinCode: options.returnCabinCode || ''
					};
					console.log("returnTicketInfo 返程", this.returnTicketInfo)
				} else {
					this.returnTicketInfo = null;
				}
			}
			// 设置导航栏标题
			this.setNavigationTitle();
			// 价格默认0，选择乘客后再获取
			this.totalPrice = 0;

			// 获取优惠券信息
			this.getCoupon();
		},
		methods: {
			// 将座位类型转换为中文显示
			getSeatTypeInChinese(seatType) {
				// 如果已经是中文，直接返回
				if (/[\u4e00-\u9fa5]/.test(seatType)) {
					return seatType;
				}

				// 转换为小写以匹配映射表
				const lowerCaseSeatType = String(seatType).toLowerCase();

				// 查找映射表中的中文名称
				return this.seatTypeMap[lowerCaseSeatType] || '普通舱';
			},

			// 格式化日期显示
			formatDateDisplay(dateString) {
				const date = new Date(dateString);
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const weekDay = weekDays[date.getDay()];

				return `${month}月${day}日 ${weekDay}`;
			},

			// 打开乘客选择弹窗
			openPassengerSelector() {
				// 更新当前已选乘客列表，用于传递给选择器组件
				this.currentSelectedGuests = [...this.passengers];

				// 打开乘客选择弹窗
				this.$refs.userSelector.open();
			},

			// 添加乘客（由选择器组件触发）
			addPassenger(passenger) {
				this.passengers.push(passenger);
				this.contactInfo.name = this.passengers[0].name;
				this.contactInfo.phone = this.passengers[0].phone;
				this.getTicketPrice();
			},

			// 删除乘客
			removePassenger(index) {
				this.passengers.splice(index, 1);
				this.getTicketPrice();
			},

			// 清空乘客列表（由选择器组件触发）
			clearPassengers() {
				this.passengers = [];
			},

			// 完成乘客选择（由选择器组件触发）
			onSelectComplete() {
				// 关闭选择器弹窗
				this.$refs.userSelector.close();
			},

			// 切换同意条款状态
			toggleAgreement() {
				this.agreedToTerms = !this.agreedToTerms;
			},

			// 跳转到购票须知详情页
			goToTermsDetail(id) {
				uni.navigateTo({
					url: `/ticket_subpages/index/article?id=${id}`,
				});
			},

			// 提交订单
			submitOrder() {
				// 防重复提交
				if (this.isSubmitting) {
					uni.showToast({
						title: this.$t('ticket.booking.submittingToast'),
						icon: 'none'
					});
					return;
				}

				// 检查是否可以提交订单
				if (!this.canSubmitOrder) {
					let message = '';
					if (this.passengers.length === 0) {
						message = this.$t('ticket.booking.noPassengerError');
					} else if (!this.contactInfo.name || !this.contactInfo.phone) {
						message = this.$t('ticket.booking.contactInfoError');
					} else if (!this.agreedToTerms) {
						message = this.$t('ticket.booking.termsError');
					} else {
						message = this.$t('ticket.booking.incompleteOrderError');
					}

					uni.showToast({
						title: message,
						icon: "none",
					});
					return;
				}

				if (this.passengers && this.passengers.length > 0) {
					// 检查是否包含特殊票种且无其他票种
					const specialTypes = ["儿童免费票", "半票", "海岛学生票"];
					let hasSpecial = false;
					let hasOther = false;
					for (const p of this.passengers) {
						const goType = p.goTicketTypeName;
						const backType = p.backTicketTypeName;
						const isSpecialGo = goType && specialTypes.some(type => goType.includes(type));
						const isSpecialBack = backType && specialTypes.some(type => backType.includes(type));
						if (isSpecialGo || isSpecialBack) {
							hasSpecial = true;
						}
						// 只要有一项有值且不是特殊票，就算“其他票种”
						if ((goType && !isSpecialGo) || (backType && !isSpecialBack)) {
							hasOther = true;
						}
					}
					if (hasSpecial && !hasOther) {
						// 只包含特殊票种，不允许提交
						uni.showToast({
							title: "符合'海岛学生票、儿童免费票、儿童半票'的旅客不支持单独购票出行，须与随行成人一同购票",
							icon: "none",
						});
						return;
					}
				}

				// 设置提交状态
				this.isSubmitting = true;

				// 构建订单数据
				const orderData = {
					ticketInfo: this.ticketInfo,
					returnTicketInfo: this.orderType === 1 ? this.returnTicketInfo : null,
					passengers: this.passengers,
					contactInfo: this.contactInfo,
					ticketCount: this.ticketCount,
					totalPrice: this.totalPrice,
					remark: this.remark,
					orderType: this.orderType
				};


				// 根据订单类型调用不同接口
				if (this.orderType === 0) {
					// 调用单程票接口
					console.log('提交单程船票订单:', orderData);

					getGoodsDetail({
						Id: 74
					}).then(res => {

						const data = res.Data
						const {
							ProductSpecList
						} = data
						console.log(ProductSpecList)

						console.log(this.passengers);

						const orderRemak = {
							contactName: this.contactInfo.name,
							contactMobile: this.contactInfo.phone,
							detailList: [{
								"departDate": this.ticketInfo.departureDate + " " + this.ticketInfo
									.departureTime,
								"startPortID": this.ticketInfo.startPortId,
								"arrivePortID": this.ticketInfo.arrivePortId,
								"cabinID": this.ticketInfo.cabinId,
								"tripType": 0,
								"passengerList": this.passengers.map(item => {
									return {
										"passengerName": item.name,
										"passengerCertType": "01",
										"passengerCertNO": item.idCard,
										"passengerCertMobile": item.phone,
										// "ticketTypeID": item.goTicketData.ticketTypeID,
										"passengerAddress": this.ticketInfo.departurePlace,
										// "ticketTypeName": item.goTicketData.ticketTypeName,
										// "ticketPrice": item.goTicketData.ticketPrice,
                    ...item.goTicketData
									}
								})
							}]
						}
						// 构建订单参数
						const orderParams = {
							BusinessId: data.BusinessId,
							ProductId: data.Id,
							ProductSpecId: ProductSpecList[0].Id,
							ProductName: `${this.ticketInfo.departurePlace}-${this.ticketInfo.arrivalPlace}`,
							ProductType: data.Type,
							Price: this.totalPrice,
							// Price: 0.01,
							Count: 1,
							PayStatus: 0,
							Point: 0,
							Deposit: 0,
							ContactMobile: '',
							ContactName: '',
							CouponDiscount: this.couponTotalDiscount,
							// OriginalPrice: this.totalPrice,
							PlatformType: 20, // 小程序
							SettleType: 1,
							payType: 0,
							IsTicket: 1, // 电子票
							ShopId: data.shopId || 0,
							MerchantId: data.MerchantID || 0,
							Persons: [],
							OrderRemak: JSON.stringify(orderRemak)
						};

						// 构建优惠券参数
						const useCoupons = this.buildCouponParams();

						// 构建请求参数
						const requestParams = {
							OrderProductList: [orderParams],
							Coupons: useCoupons
						};
						// 调用API提交订单
						addEleCouponOrders(requestParams).then(res => {
							// 提交完成后，重置状态
							this.isSubmitting = false;

            const data = res.Data
            if (data.IsPay === 0){
              uni.redirectTo({
                url: `/mall_subpages/goods/success?id=${data.OrdersOnLineId}&delta=1`
              });
            }
            else if(data.IsPay === 1){
              uni.redirectTo({
                url: `/mall_subpages/goods/payment?id=${data.OrdersOnLineId}&delta=1`
              });
            }else {
              uni.showToast({
                icon: 'none',
                title: this.$t('ticket.booking.createOrderFailed')
              });
            }
          }).catch(() => {
            // 出错时也需要重置状态
            this.isSubmitting = false;
          });

					}).catch(() => {
						// 出错时重置状态
						this.isSubmitting = false;
					});

				} else {
					// 调用往返票接口
					console.log('提交往返船票订单:', orderData);

					getGoodsDetail({
						Id: 74
					}).then(res => {

						const data = res.Data
						const {
							ProductSpecList
						} = data
						console.log(ProductSpecList)

						console.log(this.passengers);

						// 构建去程订单备注
						const departureOrderRemak = {
							contactName: this.contactInfo.name,
							contactMobile: this.contactInfo.phone,
							detailList: [{
								"departDate": this.ticketInfo.departureDate + " " + this.ticketInfo
									.departureTime,
								"startPortID": this.ticketInfo.startPortId,
								"arrivePortID": this.ticketInfo.arrivePortId,
								"cabinID": this.ticketInfo.cabinId,
								"tripType": 0, // 去程
								"passengerList": this.passengers.map(item => {
									return {
										"passengerName": item.name,
										"passengerCertType": "01",
										"passengerCertNO": item.idCard,
										"passengerCertMobile": item.phone,
										// "ticketTypeID": item.goTicketData.ticketTypeID,
										"passengerAddress": this.ticketInfo.departurePlace,
										// "ticketTypeName": item.goTicketData.ticketTypeName,
										// "ticketPrice": item.goTicketData.ticketPrice,
                    ...item.goTicketData
									}
								})
							}]
						}

						// 构建返程订单备注
						const returnOrderRemak = {
							contactName: this.contactInfo.name,
							contactMobile: this.contactInfo.phone,
							detailList: [{
								"departDate": this.returnTicketInfo.departureDate + " " + this
									.returnTicketInfo.departureTime,
								"startPortID": this.returnTicketInfo.startPortId,
								"arrivePortID": this.returnTicketInfo.arrivePortId,
								"cabinID": this.returnTicketInfo.cabinId,
								"tripType": 1, // 返程
								"passengerList": this.passengers.map(item => {
									return {
										"passengerName": item.name,
										"passengerCertType": "01",
										"passengerCertNO": item.idCard,
										"passengerCertMobile": item.phone,
										// "ticketTypeID": item.backTicketData.ticketTypeID,
										"passengerAddress": this.returnTicketInfo.departurePlace,
										// "ticketTypeName": item.backTicketData.ticketTypeName,
										// "ticketPrice": item.backTicketData.ticketPrice,
                    ...item.backTicketData
									}
								})
							}]
						}

						// 计算去程和返程价格
						const goTotalPrice = this.passengers.reduce((sum, item) => sum + (parseFloat(item
							.goTicketData?.ticketPrice) || 0), 0);
						const backTotalPrice = this.passengers.reduce((sum, item) => sum + (parseFloat(item
							.backTicketData?.ticketPrice) || 0), 0);

						// 分配优惠券折扣（按比例分配）
						const totalOriginalPrice = goTotalPrice + backTotalPrice;
						const goDiscountRatio = totalOriginalPrice > 0 ? goTotalPrice / totalOriginalPrice : 0.5;
						const backDiscountRatio = totalOriginalPrice > 0 ? backTotalPrice / totalOriginalPrice :
							0.5;

						const goCouponDiscount = parseFloat(this.couponTotalDiscount || 0) * goDiscountRatio;
						const backCouponDiscount = parseFloat(this.couponTotalDiscount || 0) * backDiscountRatio;

						// 构建去程订单参数
						const departureOrderParams = {
							BusinessId: data.BusinessId,
							ProductId: data.Id,
							ProductSpecId: ProductSpecList[0].Id,
							ProductName: `${this.ticketInfo.departurePlace}-${this.ticketInfo.arrivalPlace}(去程)`,
							ProductType: data.Type,
							Price: Math.max(0, (parseFloat(goTotalPrice) || 0) - (parseFloat(
								goCouponDiscount) || 0)).toFixed(2),
							Count: 1,
							PayStatus: 0,
							Point: 0,
							Deposit: 0,
							ContactMobile: '',
							ContactName: '',
							CouponDiscount: goCouponDiscount,
							OriginalPrice: parseFloat(goTotalPrice) || 0,
							PlatformType: 20, // 小程序
							SettleType: 1,
							payType: 0,
							IsTicket: 1, // 电子票
							ShopId: data.shopId || 0,
							MerchantId: data.MerchantID || 0,
							Persons: [],
							OrderRemak: JSON.stringify(departureOrderRemak)
						};

						// 构建返程订单参数
						const returnOrderParams = {
							BusinessId: data.BusinessId,
							ProductId: data.Id,
							ProductSpecId: ProductSpecList[0].Id,
							ProductName: `${this.returnTicketInfo.departurePlace}-${this.returnTicketInfo.arrivalPlace}(返程)`,
							ProductType: data.Type,
							Price: Math.max(0, (parseFloat(backTotalPrice) || 0) - (parseFloat(
								backCouponDiscount) || 0)).toFixed(2),
							Count: 1,
							PayStatus: 0,
							Point: 0,
							Deposit: 0,
							ContactMobile: '',
							ContactName: '',
							CouponDiscount: backCouponDiscount,
							OriginalPrice: parseFloat(backTotalPrice) || 0,
							PlatformType: 20, // 小程序
							SettleType: 1,
							payType: 0,
							IsTicket: 1, // 电子票
							ShopId: data.shopId || 0,
							MerchantId: data.MerchantID || 0,
							Persons: [],
							OrderRemak: JSON.stringify(returnOrderRemak)
						};

						// 构建优惠券参数
						const useCoupons = this.buildCouponParams();

						// 构建请求参数（包含两个订单）
						const requestParams = {
							OrderProductList: [departureOrderParams, returnOrderParams],
							Coupons: useCoupons
						};

						// 调用API提交订单
						addEleCouponOrders(requestParams).then(res => {
							// 提交完成后，重置状态
							this.isSubmitting = false;

            const data = res.Data
            if (data.IsPay === 0){
              uni.redirectTo({
                url: `/mall_subpages/goods/success?id=${data.OrdersOnLineId}&delta=1`
              });
            }
            else if (data.IsPay === 1) {
              uni.redirectTo({
                url: `/mall_subpages/goods/payment?id=${data.OrdersOnLineId}&delta=1`
              });
            } else {
              uni.showToast({
                icon: 'none',
                title: this.$t('ticket.booking.createOrderFailed')
              });
            }
          }).catch(() => {
            // 出错时也需要重置状态
            this.isSubmitting = false;
          });

					}).catch(() => {
						// 出错时重置状态
						this.isSubmitting = false;
					});
				}
			},
			async getTicketPrice() {
				if (!this.passengers.length) {
					this.totalPrice = 0;
					return;
				}
				let total = 0;
				let goTotal = 0;
				let backTotal = 0;

				try {
					// 去程
					const goInfo = this.passengers.map(passenger => ({
						CertNO: passenger.idCard,
						ClassID: this.ticketInfo.id,
						CabinID: this.ticketInfo.cabinId || '', // 允许为空
						StartPortID: this.ticketInfo.startPortId,
						ArrivePortID: this.ticketInfo.arrivePortId,
						PassengerAddress: passenger.address || '123'
					}));

					const goRes = await isLanderTicket({
						info: goInfo
					});

					if (goRes && goRes.Data && Array.isArray(goRes.Data)) {
						goRes.Data.forEach((item, idx) => {
							if (this.passengers[idx]) {
								// 存储完整的去程票务数据
								this.$set(this.passengers[idx], 'goTicketData', item);
								this.$set(this.passengers[idx], 'goTicketTypeName', item.ticketTypeName || '');
							}
						});
						goTotal = goRes.Data.reduce((sum, item) => sum + (parseFloat(item.ticketPrice) || 0), 0);
						total += goTotal;
					}

					// 往返票
					if (this.orderType === 1 && this.returnTicketInfo) {
						const backInfo = this.passengers.map(passenger => ({
							CertNO: passenger.idCard,
							ClassID: this.returnTicketInfo.id,
							CabinID: this.returnTicketInfo.cabinId || '', // 允许为空
							StartPortID: this.returnTicketInfo.startPortId,
							ArrivePortID: this.returnTicketInfo.arrivePortId,
							PassengerAddress: passenger.address || '123'
						}));

						const backRes = await isLanderTicket({
							info: backInfo
						});

						if (backRes && backRes.Data && Array.isArray(backRes.Data)) {
							backRes.Data.forEach((item, idx) => {
								if (this.passengers[idx]) {
									// 存储完整的返程票务数据
									this.$set(this.passengers[idx], 'backTicketData', item);
									this.$set(this.passengers[idx], 'backTicketTypeName', item
										.ticketTypeName || '');
								}
							});
							backTotal = backRes.Data.reduce((sum, item) => sum + (parseFloat(item.ticketPrice) || 0),
								0);
							total += backTotal;
						}
					}

					this.totalPrice = total;
					// 重新计算优惠券折扣
					this.calculateCouponDiscount();
				} catch (e) {
					this.totalPrice = 0;
					uni.showToast({
						title: this.$t('ticket.booking.getPriceFailed'),
						icon: 'none'
					});
				}
			},
			openDetailPopup() {
				this.$refs.detailPopup.open();
			},
			closeDetailPopup() {
				this.$refs.detailPopup.close();
			},
			setNavigationTitle() {
				uni.setNavigationBarTitle({
					title: this.$t('ticket.booking.title')
				});
			},

			// 获取用户优惠券
			async getCoupon() {
				try {
					const {
						Data
					} = await GetUserCoupons({
						Index: 1,
						Size: 100,
						BusinessId: 74, // 固定使用商品ID 74对应的商户
						CouponStatus: 1
					});

					if (!Data || !Array.isArray(Data)) {
						console.warn('获取优惠券返回数据格式异常');
						this.hasCoupons = false;
						return;
					}

					const currentDate = Date.now();

					// 筛选有效优惠券
					const validCoupons = Data.filter(coupon => {
						const startTime = Date.parse(coupon.EffectStartDatetime);
						const endTime = Date.parse(coupon.EffectEndDatetime);
						return currentDate < endTime && currentDate > startTime;
					});

					// 设置是否有可用优惠券
					this.hasCoupons = validCoupons.length > 0;

				} catch (error) {
					console.error('获取优惠券失败:', error);
					this.hasCoupons = false;
				}
			},

			// 跳转到优惠券选择页面
			navigateToCoupons() {
				// 准备传递的参数
				const params = {
					businessId: 74, // 固定使用商品ID 74对应的商户
					totalPrice: this.totalPrice,
					productId: 74,
					selectedCoupons: this.useCoupons || [] // 传递已选择的优惠券
				};

				// 跳转到优惠券页面
				uni.navigateTo({
					url: '/mall_subpages/goods/coupons?params=' + encodeURIComponent(JSON.stringify(params))
				});
			},

			// 从优惠券页面返回时接收数据
			onCouponSelected(coupons) {
				this.useCoupons = coupons || [];
				// 计算优惠券总折扣金额
				this.calculateCouponDiscount();
			},

			// 计算优惠券总折扣金额
			calculateCouponDiscount() {
				if (!this.useCoupons || this.useCoupons.length === 0) {
					this.couponTotalDiscount = 0;
					return;
				}

				let totalDiscount = 0;
				const originalPrice = parseFloat(this.totalPrice) || 0;

				this.useCoupons.forEach(coupon => {
					if (coupon.CouponTemple && coupon.CouponTemple.FullReduceAmount) {
						const discount = parseFloat(coupon.CouponTemple.FullReduceAmount) || 0;
						totalDiscount += discount;
					}
				});

				// 确保折扣不超过总价且不为负数
				this.couponTotalDiscount = Math.min(totalDiscount, originalPrice);
				this.couponTotalDiscount = Math.max(0, this.couponTotalDiscount);
			},

			// 构建优惠券参数
			buildCouponParams() {
				if (!this.useCoupons || this.useCoupons.length === 0) {
					return [];
				}

				return this.useCoupons.map(coupon => ({
					CouponCode: coupon.CouponCode,
					BusinessId: coupon.BusinessIds ? 74 : 0
				}));
			},

			// 获取乘客去程票价
			getPassengerGoPrice(passenger) {
				if (passenger.goTicketData && passenger.goTicketData.ticketPrice) {
					return parseFloat(passenger.goTicketData.ticketPrice) || 0;
				}
				return 0;
			},

			// 获取乘客返程票价
			getPassengerBackPrice(passenger) {
				if (passenger.backTicketData && passenger.backTicketData.ticketPrice) {
					return parseFloat(passenger.backTicketData.ticketPrice) || 0;
				}
				return 0;
			},

			// 获取乘客总票价
			getPassengerTotalPrice(passenger) {
				const goPrice = this.getPassengerGoPrice(passenger);
				const backPrice = this.orderType === 1 ? this.getPassengerBackPrice(passenger) : 0;
				return goPrice + backPrice;
			},

			// 计算所有乘客去程总价
			getGoTotalPrice() {
				return this.passengers.reduce((sum, passenger) => sum + this.getPassengerGoPrice(passenger), 0);
			},

			// 计算所有乘客返程总价
			getBackTotalPrice() {
				if (this.orderType !== 1) return 0;
				return this.passengers.reduce((sum, passenger) => sum + this.getPassengerBackPrice(passenger), 0);
			},
			onClickTips(type) {
				if (type === '1') {
					this.alertTipsMessage = '指用户为珠海户籍，身份证地址中包含“珠海”或身份证号码为“4404”开头，身份证证件号码不是“4404”开头的珠海市民，暂不支持线上享受优惠，可先购买全票，并于登船前在窗口办理变更退还差价，乘客列表中显示“珠海市民”标识，购票支付时可享受珠海市民票优惠。';
				} else if (type === '2') {
					this.alertTipsMessage = '如您符合海岛居民购票政策，添加乘客信息保存后，乘客列表中会显示“岛民”标识，购票将享受海岛居民优惠，如添加海岛居民的身份信息后，乘客列表未显示“岛民”标识，请在“我的”咨询玩转万山客服或电话 19229620903(工作时间08:00-17:30)。';
				}
				this.$refs.tipsPopup.open();
			},
			closeAlertPopup() {
				this.$refs.tipsPopup.close();
			}
		}
	}
</script>

<template>
	<view class="predetermined-container">
		<!-- 订单类型指示 -->
		<view class="order-type-banner" :class="{'round-trip': orderType === 1}">
			<text>{{orderType === 0 ? $t('ticket.booking.singleTrip') : $t('ticket.booking.roundTrip')}}</text>
		</view>

		<!-- 船票信息卡片 -->
		<view class="ticket-info-card">
			<view class="route-info">
				<view class="departure-place">{{ticketInfo.departurePlace}}</view>
				<view class="route-direction">
					<image class="direction-icon" src="/static/images/ship-icon.png" mode="aspectFit"></image>
					<view class="direction-line"></view>
				</view>
				<view class="arrival-place">{{ticketInfo.arrivalPlace}}</view>
			</view>

			<view class="ticket-details">
				<view class="time-wrapper">
					<view class="time-section">
						<text class="time-label">{{$t('ticket.common.departureTime')}}</text>
						<text class="time-value">{{ticketInfo.departureTime}}</text>
						<text class="date-value">{{formattedDepartureDate}}</text>
					</view>

					<view class="duration-section">
						<text class="duration">{{ticketInfo.duration}}</text>
						<image class="ship-icon"
							src="https://wzws.wanshanlundiao.cn/upload/img/20250512/202505121415369158.png"
							mode="aspectFit"></image>
						<text class="ship-name">{{ticketInfo.shipName || $t('ticket.common.shipName')}}</text>
					</view>

					<view class="time-section">
						<text class="time-label">{{$t('ticket.common.arrivalTime')}}</text>
						<text class="time-value">{{ticketInfo.arrivalTime}}</text>
					</view>
				</view>

				<view class="seat-info">
					<text class="seat-type">{{formattedSeatType}}</text>
					<!--          <text class="seat-price">¥{{ticketInfo.seatTypePrice}}</text>-->
				</view>
			</view>
		</view>

		<!-- 如果是往返票，显示返程信息 -->
		<view class="ticket-info-card return-ticket" v-if="orderType === 1 && returnTicketInfo">
			<view class="return-badge">{{$t('ticket.booking.returnTrip')}}</view>

			<view class="route-info">
				<view class="departure-place">{{returnTicketInfo.departurePlace}}</view>
				<view class="route-direction">
					<image class="direction-icon" src="/static/images/ship-icon.png" mode="aspectFit"></image>
					<view class="direction-line"></view>
				</view>
				<view class="arrival-place">{{returnTicketInfo.arrivalPlace}}</view>
			</view>

			<view class="ticket-details">
				<view class="time-wrapper">
					<view class="time-section">
						<text class="time-label">{{$t('ticket.common.departureTime')}}</text>
						<text class="time-value">{{returnTicketInfo.departureTime}}</text>
						<text class="date-value">{{formattedReturnDate}}</text>
					</view>

					<view class="duration-section">
						<text class="duration">{{returnTicketInfo.duration}}</text>
						<image class="ship-icon"
							src="https://wzws.wanshanlundiao.cn/upload/img/20250512/202505121415369158.png"
							mode="aspectFit"></image>
						<text class="ship-name">{{returnTicketInfo.shipName || $t('ticket.common.shipName')}}</text>
					</view>

					<view class="time-section">
						<text class="time-label">{{$t('ticket.common.arrivalTime')}}</text>
						<text class="time-value">{{returnTicketInfo.arrivalTime}}</text>
					</view>
				</view>

				<view class="seat-info">
					<text class="seat-type">{{formattedReturnSeatType}}</text>
					<!-- <text class="seat-price">¥{{returnTicketInfo.seatTypePrice}}</text> -->
				</view>
			</view>
		</view>

		<!-- 乘客信息 -->
		<view class="passenger-info-card">
			<view class="info-header">
				<view class="info-title">{{$t('ticket.booking.passengerInfo')}} <text
						class="passenger-count-tip">({{$t('ticket.booking.passengerCountTip')}})</text></view>
				<view class="add-passenger-btn" @click="openPassengerSelector">
					<text class="add-icon">+</text>
					<text class="add-text">{{$t('ticket.booking.addPassenger')}}</text>
				</view>
			</view>

			<!-- 乘客列表 -->
			<view class="passenger-list">
				<view class="passenger-item" v-for="(passenger, index) in passengers" :key="index">
					<view class="passenger-index">{{$t('ticket.booking.passenger', {index: index + 1})}}</view>
					<view class="passenger-details">
						<text class="passenger-name">{{passenger.name}}</text>
						<text class="id-number">- {{passenger.phone}}</text>
						<text class="id-full">{{passenger.idCard}}</text>
					</view>
					<view class="ticket-type-box">
						<text class="ticket-type-text" v-if="orderType === 1">
							{{$t('ticket.booking.outbound')}}: {{passenger.goTicketTypeName || '—'}}<br />
							{{$t('ticket.booking.inbound')}}: {{passenger.backTicketTypeName || '—'}}
						</text>
						<text class="ticket-type-text" v-else>
							{{passenger.goTicketTypeName || '—'}}
						</text>
					</view>
					<view class="delete-btn" @click="removePassenger(index)">
						<text class="delete-icon">×</text>
					</view>
				</view>

				<!-- 没有乘客时的提示 -->
				<view class="no-passenger" v-if="passengers.length === 0">
					<text class="no-passenger-tip">{{$t('ticket.booking.noPassengerTip')}}</text>
				</view>
			</view>
		</view>

		<!-- 优惠政策 -->
		<view class="discount-policy-card">
			<view class="discount-policy-head">
				<view class="head-title">优惠政策</view>
				<view class="head-desc">
					<text class="desc-c" @click="onClickTips('1')">珠海市民</text>
					<text class="desc-c" @click="onClickTips('2')">珠海岛民</text>
					<text class="desc-d">点击了解详情</text>
				</view>
			</view>
			<view class="discount-policy-body">
				<view class="body-item">
					<view class="item-title">长者票</view>
					<view class="item-desc">年龄&ge;60周岁</view>
				</view>
				<view class="body-item">
					<view class="item-title">成人票</view>
					<view class="item-desc">普通全票</view>
				</view>
				<view class="body-item">
					<view class="item-title">儿童半票</view>
					<view class="item-desc">年龄&le;14周岁</view>
					<view class="item-desc">身高1.2-1.5米</view>
				</view>
				<view class="body-item">
					<view class="item-title">儿童免费票</view>
					<view class="item-desc">年龄&le;6周岁</view>
					<view class="item-desc">{{ sgdesc }}</view>
				</view>
			</view>
		</view>

		<!-- 联系人信息 -->
		<view class="contact-info-card">
			<view class="info-title">{{$t('ticket.booking.contactInfo')}}</view>
			<view class="contact-form">
				<view class="form-item">
					<text class="form-label">{{$t('ticket.booking.contactName')}}</text>
					<input class="form-input" type="text" v-model="contactInfo.name"
						:placeholder="$t('ticket.booking.contactNamePlaceholder')" />
				</view>
				<view class="form-item">
					<text class="form-label">{{$t('ticket.booking.contactPhone')}}</text>
					<input class="form-input" type="number" v-model="contactInfo.phone"
						:placeholder="$t('ticket.booking.contactPhonePlaceholder')" />
				</view>
			</view>
		</view>

		<!-- 优惠券区域 -->
		<view class="coupon-area">
			<view class="coupon-section">
				<view class="coupon-header">
					<view class="info-title">{{$t('order.coupon.title') || '优惠券'}}</view>
					<view class="coupon-status" v-if="useCoupons.length > 0">
						{{$t('order.coupon.selected', {count: useCoupons.length, amount: couponTotalDiscount.toFixed(2)}) || `已选择${useCoupons.length}张，优惠¥${couponTotalDiscount.toFixed(2)}`}}
					</view>
					<view class="coupon-status available" v-else-if="hasCoupons">
						{{$t('order.coupon.available') || '有可用优惠券'}}
					</view>
					<view class="coupon-status unavailable" v-else>
						{{$t('order.coupon.unavailable') || '暂无可用优惠券'}}
					</view>
				</view>
				<view class="coupon-selection" @click="navigateToCoupons">
					<view class="select-text">{{$t('order.coupon.select') || '选择优惠券'}}</view>
					<text class="arrow-icon">></text>
				</view>
			</view>
		</view>

		<!-- 备注信息 -->
		<view class="remarks-card">
			<view class="info-title">{{$t('ticket.booking.remarks')}}</view>
			<view class="input-wrapper">
				<input class="remark-input" type="text" v-model="remark"
					:placeholder="$t('ticket.booking.remarksPlaceholder')" placeholder-style="color: #999;" />
			</view>
		</view>

		<!-- 购票须知 -->
		<view class="terms-card">
			<view class="terms-header">
				<view class="info-title">{{$t('ticket.booking.termsTitle')}}</view>
			</view>
			<view class="terms-content">
				<view class="term-item">{{$t('ticket.booking.term1')}}</view>
				<view class="term-item">{{$t('ticket.booking.term2')}}</view>
				<view class="term-item">{{$t('ticket.booking.term3')}}</view>
				<view class="term-item">{{$t('ticket.booking.term4')}}</view>
				<view class="term-item">{{$t('ticket.booking.term5')}}</view>
				<view class="term-item">{{$t('ticket.booking.term6')}}</view>
				<view class="term-item">{{$t('ticket.booking.term7')}}</view>
				<view class="term-subitem">{{$t('ticket.booking.term7_1')}}</view>
				<view class="term-subitem">{{$t('ticket.booking.term7_2')}}</view>
				<view class="term-subitem">{{$t('ticket.booking.term7_3')}}</view>
			</view>
		</view>

		<!-- 同意条款区域 -->
		<view class="agreement-row">
			<view class="checkbox" :class="{ checked: agreedToTerms }" @click="toggleAgreement">
				<view class="check-inner" v-if="agreedToTerms"></view>
			</view>
			<view class="agreement-text-container" @click="toggleAgreement">
				<text class="agreement-text">{{
			$t("ticket.booking.agreementText")
			}}</text>、
				<text class="terms-link"
					@click.stop="goToTermsDetail(5715)">《{{ $t("ticket.booking.termsTitle2") }}》</text>丶
				<text class="terms-link" @click.stop="goToTermsDetail(5773)">《用户协议》</text>丶
				<text class="terms-link" @click.stop="goToTermsDetail(5774)">《隐私政策》</text>丶
				<text class="terms-link" @click.stop="goToTermsDetail(5775)">《免责声明》</text>
			</view>
		</view>

		<!-- 底部结算栏 -->
		<view class="bottom-bar">
			<view class="price-section">
				<text class="price-label">{{$t('ticket.booking.total')}}</text>
				<text class="total-price">¥{{finalPayPrice}}</text>
			</view>
			<view class="detail-btn" @click="openDetailPopup">{{$t('ticket.booking.details')}}</view>
			<view class="submit-btn"
				:class="{'btn-enabled': canSubmitOrder && !isSubmitting, 'btn-submitting': isSubmitting}"
				@click="submitOrder">
				<text v-if="!isSubmitting">{{$t('ticket.booking.submitOrder')}}</text>
				<text v-else>{{$t('ticket.booking.submitting')}}</text>
			</view>
		</view>

		<!-- 乘客选择弹窗 -->
		<uni-popup ref="userSelector" type="bottom">
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">{{$t('ticket.booking.selectPassenger')}}</text>
					<text class="popup-close" @click="$refs.userSelector.close()">×</text>
				</view>
				<view class="popup-body">
					<select-user title="出行人" :selectedGuests="currentSelectedGuests" @select="addPassenger" @clear="clearPassengers"
						@complete="onSelectComplete"></select-user>
				</view>
			</view>
		</uni-popup>

		<!-- 明细弹窗 -->
		<uni-popup ref="detailPopup" type="bottom">
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">{{$t('ticket.booking.passengerTicketDetails')}}</text>
					<text class="popup-close" @click="closeDetailPopup">×</text>
				</view>
				<view class="popup-body">
					<!-- 乘客详情 -->
					<view v-for="(passenger, idx) in passengers" :key="'detail-'+idx" class="detail-passenger-item">
						<view class="detail-row"><text>{{$t('ticket.booking.passengerName')}}：</text>{{passenger.name}}
						</view>
						<view class="detail-row"><text>{{$t('ticket.booking.idNumber')}}：</text>{{passenger.idCard}}
						</view>

						<!-- 往返票显示 -->
						<template v-if="orderType === 1">
							<view class="detail-row">
								<text>{{$t('ticket.booking.outboundTicketType')}}：</text>{{passenger.goTicketTypeName || '—'}}
								<text class="price-text"
									v-if="getPassengerGoPrice(passenger) > 0">¥{{getPassengerGoPrice(passenger).toFixed(2)}}</text>
							</view>
							<view class="detail-row">
								<text>{{$t('ticket.booking.inboundTicketType')}}：</text>{{passenger.backTicketTypeName || '—'}}
								<text class="price-text"
									v-if="getPassengerBackPrice(passenger) > 0">¥{{getPassengerBackPrice(passenger).toFixed(2)}}</text>
							</view>
							<view class="detail-row total-row">
								<text>小计：</text>
								<text class="total-price-text">¥{{getPassengerTotalPrice(passenger).toFixed(2)}}</text>
							</view>
						</template>

						<!-- 单程票显示 -->
						<template v-else>
							<view class="detail-row">
								<text>{{$t('ticket.booking.ticketType')}}：</text>{{passenger.goTicketTypeName || '—'}}
								<text class="price-text"
									v-if="getPassengerGoPrice(passenger) > 0">¥{{getPassengerGoPrice(passenger).toFixed(2)}}</text>
							</view>
						</template>
					</view>

					<!-- 总计区域 -->
					<view class="detail-summary">
						<view class="summary-title">费用明细</view>
						<view class="summary-row" v-if="orderType === 1">
							<text>去程费用：</text>
							<text class="summary-price">¥{{getGoTotalPrice().toFixed(2)}}</text>
						</view>
						<view class="summary-row" v-if="orderType === 1">
							<text>返程费用：</text>
							<text class="summary-price">¥{{getBackTotalPrice().toFixed(2)}}</text>
						</view>
						<view class="summary-row" v-if="couponTotalDiscount > 0">
							<text>优惠券折扣：</text>
							<text class="discount-price">-¥{{parseFloat(couponTotalDiscount).toFixed(2)}}</text>
						</view>
						<view class="summary-row total-summary">
							<text>{{orderType === 1 ? '应付金额：' : '应付金额：'}}</text>
							<text class="total-summary-price">¥{{finalPayPrice}}</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup
			ref="tipsPopup"
			type="center"
			class="alert-popup"
		>
			<view class="alert-popup-content">
				<view class="alert-title">温馨提示</view>
				<view class="alert-message">{{ alertTipsMessage }}</view>
				<view class="confirm-btn" @click="closeAlertPopup">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<style scoped lang="scss">
	// 定义全局变量
	$primary-color: #498FFF;
	$primary-gradient: linear-gradient(135deg, #498FFF 0%, #3A7FE6 100%);
	$text-primary: #333;
	$text-secondary: #666;
	$text-light: #999;
	$background-light: #F5F5F5;
	$background-white: #FFF;
	$border-radius: 12rpx;
	$padding-common: 30rpx;
	$margin-bottom: 20rpx;
	$font-small: 24rpx;
	$font-medium: 28rpx;
	$font-large: 32rpx;
	$font-xlarge: 36rpx;

	// 通用卡片样式
	@mixin card {
		background-color: $background-white;
		border-radius: $border-radius;
		padding: $padding-common;
		margin-bottom: $margin-bottom;
	}

	// 布局容器
	.predetermined-container {
		padding: $padding-common $padding-common 220rpx;
		background-color: $background-light;
		min-height: 100vh;
	}

	// 订单类型横幅
	.order-type-banner {
		background-color: #F0F5FF;
		color: #498FFF;
		padding: 16rpx 20rpx;
		text-align: left;
		border-radius: $border-radius;
		font-size: $font-medium;
		margin-bottom: $margin-bottom;
		font-weight: bold;
		border-left: 8rpx solid #498FFF;
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, rgba(73, 143, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
			z-index: 1;
		}

		text {
			position: relative;
			z-index: 2;
		}

		&.round-trip {
			background-color: #FFF2F0;
			color: #FF5233;
			border-left-color: #FF5233;

			&::before {
				background: linear-gradient(90deg, rgba(255, 82, 51, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
			}
		}
	}

	// 卡片组件
	.ticket-info-card,
	.ticket-count-card,
	.passenger-info-card,
	.discount-policy-card,
	.contact-info-card,
	.coupon-area,
	.remarks-card,
	.terms-card {
		@include card;
	}

	.discount-policy-card {
		.discount-policy-head {
			display: flex;
			.head-title {

			}
			.head-desc {
				margin-left: 48rpx;
				view {
					margin-right: 8rpx;
				}
				.desc-c {
					font-size: $font-base;
					margin-right: 8rpx;
					color: #85c1ad;
					text-decoration: underline;
					cursor: pointer;
				}
				.desc-d {
					font-size: $font-small;
					color: #999;
				}
			}
		}
		.discount-policy-body {
			margin-top: 36rpx;
			display: flex;
			.body-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				padding: 16rpx 0;
				border: 1px solid #ccc;
				border-radius: 8rpx;
				box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
				margin-right: 8rpx;
				&:last-child {
					margin-right: 0;
				}
				.item-title {
					font-size: $font-base;
					font-weight: 600;
				}
				.item-desc {
					font-size: $font-small;
					color: #ccc;
				}
			}
		}
	}

	// 标题样式
	.info-title {
		font-size: $font-large - 2rpx;
		font-weight: 500;
		color: $text-primary;
		margin-bottom: 20rpx;
	}

	// 船票信息卡片
	.ticket-info-card {
		position: relative;

		.return-badge {
			position: absolute;
			top: -10rpx;
			right: 20rpx;
			background-color: #ff5233;
			color: white;
			font-size: $font-small;
			padding: 4rpx 16rpx;
			border-radius: 16rpx;
		}

		.route-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.departure-place,
			.arrival-place {
				font-size: $font-large;
				font-weight: bold;
				color: $text-primary;
			}

			.route-direction {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

				.direction-icon {
					width: 40rpx;
					height: 24rpx;
					margin-bottom: 5rpx;
				}

				.direction-line {
					height: 2rpx;
					width: 100%;
					background: linear-gradient(to right, transparent, $primary-color, transparent);
				}
			}
		}

		.ticket-details {
			.time-wrapper {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.time-section {
					display: flex;
					flex-direction: column;
					align-items: center;

					.time-label {
						font-size: $font-small;
						color: $text-secondary;
						margin-bottom: 6rpx;
					}

					.time-value {
						font-size: $font-large;
						font-weight: bold;
						color: $text-primary;
					}

					.date-value {
						font-size: $font-small;
						color: $text-secondary;
						margin-top: 6rpx;
					}
				}

				.duration-section {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 0 15rpx;
					margin-bottom: 15rpx;

					.duration-value {
						font-size: $font-small;
						color: $text-light;
					}

					.ship-icon {
						width: 180rpx;
						height: 18rpx;
					}

					.duration {
						font-size: 22rpx;
						color: #999;
					}

					.ship-name {
						font-size: 22rpx;
						color: #999;
					}
				}
			}

			.seat-info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;
				padding-top: 20rpx;
				border-top: 1rpx dashed #eee;

				.seat-type {
					font-size: $font-medium;
					color: $text-secondary;
				}

				.seat-price {
					font-size: $font-large;
					color: #ff5233;
					font-weight: bold;
				}
			}
		}
	}

	// 船票数量
	.ticket-count-card {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.count-control {
			display: flex;
			align-items: center;

			.count-btn {
				width: 60rpx;
				height: 60rpx;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: $background-light;

				&.minus {
					color: $text-light;
				}

				&.plus {
					color: $background-white;
					background-color: $primary-color;
				}
			}

			.count-number {
				margin: 0 30rpx;
				font-size: $font-large;
				font-weight: 500;
				color: $text-primary;
			}

			.minus-icon,
			.plus-icon {
				font-size: 40rpx;
				line-height: 1;
			}
		}
	}

	// 乘客信息卡片
	.passenger-info-card {
		.info-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.passenger-count-tip {
				font-size: $font-small;
				color: $text-light;
				font-weight: normal;
				margin-left: 10rpx;
			}

			.add-passenger-btn {
				display: flex;
				align-items: center;
				background-color: #f8f8f8;
				padding: 6rpx 16rpx;
				border-radius: 30rpx;

				.add-icon {
					font-size: $font-medium;
					color: $primary-color;
					margin-right: 6rpx;
				}

				.add-text {
					color: $primary-color;
					font-size: $font-small;
				}
			}
		}

		.passenger-list {
			.passenger-item {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: none;
				}

				.passenger-index {
					font-size: $font-medium;
					color: $text-secondary;
					margin-right: 20rpx;
					min-width: 80rpx;
				}

				.passenger-details {
					flex: 1;

					.passenger-name {
						font-size: $font-medium;
						color: $text-primary;
					}

					.id-number {
						font-size: $font-medium;
						color: $text-secondary;
						margin-left: 10rpx;
					}

					.id-full {
						display: block;
						font-size: $font-small;
						color: $text-light;
						margin-top: 6rpx;
					}
				}

				.delete-btn {
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.delete-icon {
						font-size: $font-xlarge;
						color: #ccc;
					}
				}
			}

			.no-passenger {
				padding: 40rpx 0;
				text-align: center;

				.no-passenger-tip {
					font-size: $font-medium;
					color: $text-light;
				}
			}
		}
	}

	// 联系人信息卡片
	.contact-info-card {
		.contact-form {
			.form-item {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: none;
				}

				.form-label {
					width: 120rpx;
					font-size: $font-medium;
					color: $text-secondary;
				}

				.form-input {
					flex: 1;
					font-size: $font-medium;
					color: $text-primary;
				}
			}
		}
	}

	// 备注信息
	.remarks-card {
		.input-wrapper {
			background-color: $background-light;
			border-radius: 8rpx;
			padding: 20rpx;

			.remark-input {
				width: 100%;
				font-size: $font-medium;
				color: $text-primary;
			}
		}
	}

	// 购票须知
	.terms-card {
		.terms-content {
			margin-bottom: 20rpx;

			.term-item {
				font-size: $font-small;
				color: $text-secondary;
				line-height: 1.6;
				margin-bottom: 10rpx;
			}

			.term-subitem {
				font-size: $font-small;
				color: $text-secondary;
				line-height: 1.6;
				margin-bottom: 8rpx;
				margin-left: 30rpx;
			}
		}
	}
	.agreement-row {
		position: fixed;
		left: 0;
		bottom: 100rpx;
		display: flex;
		align-items: flex-start;
		background-color: #fff;
		padding: 24rpx;
		z-index: 11;

		.checkbox {
			width: 36rpx;
			height: 36rpx;
			border: 2rpx solid #ccc;
			border-radius: 6rpx;
			margin-right: 12rpx;
			margin-top: 2rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;

			&.checked {
				border-color: $primary-color;
				background-color: $primary-color;
			}

			.check-inner {
				width: 20rpx;
				height: 12rpx;
				border-left: 2rpx solid #fff;
				border-bottom: 2rpx solid #fff;
				transform: rotate(-45deg) translateY(-2rpx);
			}
		}

		.agreement-text-container {
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			line-height: 1.6;
			font-size: $font-small;
		}

		.agreement-text {
			font-size: $font-small;
			color: $text-secondary;
			margin-right: 8rpx;
		}

		.terms-link {
			font-size: $font-small;
			color: $primary-color;
			text-decoration: underline;
			cursor: pointer;

			&:hover {
				color: darken($primary-color, 10%);
			}
		}
	}

	// 底部结算栏
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		background-color: $background-white;
		padding: 0 $padding-common;
		border-top: 1rpx solid #eee;
		z-index: 11;

		.price-section {
			display: flex;
			align-items: baseline;

			.price-label {
				font-size: $font-medium;
				color: $text-secondary;
				margin-right: 10rpx;
			}

			.total-price {
				font-size: $font-xlarge;
				font-weight: bold;
				color: #ff5233;
			}
		}

		.detail-btn {
			margin-left: 20rpx;
			margin-right: 20rpx;
			padding: 10rpx 30rpx;
			background: #f5f5f5;
			color: #498FFF;
			border-radius: 30rpx;
			font-size: 28rpx;
			font-weight: 500;
			align-self: center;
		}

		.submit-btn {
			width: 240rpx;
			height: 80rpx;
			background-color: #ccc;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				color: $background-white;
				font-size: $font-medium;
				font-weight: bold;
			}

			&.btn-enabled {
				background-color: $primary-color;
			}

			&.btn-submitting {
				background-color: #9fb8e0;
				/* 淡蓝色表示提交中 */
				position: relative;

				&:after {
					content: '';
					position: absolute;
					left: 15rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 24rpx;
					height: 24rpx;
					border: 3rpx solid rgba(255, 255, 255, 0.5);
					border-top-color: #fff;
					border-radius: 50%;
					animation: spin 1s linear infinite;
				}
			}
		}
	}

	// 弹窗样式
	.popup-content {
		background-color: $background-white;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		max-height: 80vh;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;

			.popup-title {
				font-size: $font-large;
				font-weight: 500;
				color: $text-primary;
			}

			.popup-close {
				font-size: 40rpx;
				color: $text-light;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.popup-body {
			max-height: calc(80vh - 100rpx);
			overflow-y: auto;
		}
	}

	.ticket-type-box {
		min-width: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 10rpx;
	}

	.ticket-type-text {
		font-size: 28rpx;
		color: #498FFF;
		font-weight: bold;
		display: block;
		text-align: center;
	}

	.detail-passenger-item {
		background: #f8f8f8;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
	}

	.detail-row {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.price-text {
			color: #498FFF;
			font-weight: 600;
			margin-left: 20rpx;
		}

		&.total-row {
			margin-top: 12rpx;
			padding-top: 12rpx;
			border-top: 1rpx dashed #ddd;
			font-weight: 500;

			.total-price-text {
				color: #FF5233;
				font-weight: bold;
				font-size: 30rpx;
			}
		}
	}

	.detail-summary {
		background: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-top: 20rpx;
		border: 1rpx solid #f0f0f0;

		.summary-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 16rpx;
			text-align: center;
		}

		.summary-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 12rpx 0;
			font-size: 28rpx;
			color: #666;

			.summary-price {
				color: #498FFF;
				font-weight: 500;
			}

			.discount-price {
				color: #FF5233;
				font-weight: 500;
			}

			&.total-summary {
				margin-top: 16rpx;
				padding-top: 16rpx;
				border-top: 2rpx solid #f0f0f0;
				font-size: 32rpx;
				font-weight: 600;
				color: #333;

				.total-summary-price {
					color: #FF5233;
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}
	}

	// 优惠券区域样式
	.coupon-area {
		.coupon-section {
			.coupon-header {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.info-title {
					margin-bottom: 0;
					margin-right: 20rpx;
				}

				.coupon-status {
					flex: 1;
					font-size: 24rpx;
					color: $primary-color;

					&.available {
						color: $primary-color;
					}

					&.unavailable {
						color: $text-light;
					}
				}
			}

			.coupon-selection {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;
				padding: 0 20rpx;
				background-color: $background-light;
				border-radius: 8rpx;

				.select-text {
					font-size: $font-medium;
					color: $text-secondary;
				}

				.arrow-icon {
					font-size: $font-medium;
					color: $text-light;
				}
			}
		}
	}
	.alert-popup {
		/deep/ .uni-popup__wrapper {
			width: 80%;
		}
		.alert-popup-content {
			background-color: #fff;
			padding: 40rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			.alert-title {
				font-size: $font-base;
				font-weight: 600;
				text-align: center;
			}
			.alert-message {
				font-size: $font-small;
				color: #999;
				margin: 24rpx 0;
			}
			.confirm-btn {
				background-color: #498FFF;
				color: #fff;
				font-size: 32rpx;
				text-align: center;
				padding: 20rpx 0;
				border-radius: 10rpx;
				cursor: pointer;
			}
		}
	}
</style>